<template>
    <!-- 查询区 -->
    <div class="search" >
        <el-form :inline="true" :model="ad" ref="searchfromat">
            <el-form-item label="编号" prop="userId">
                <el-input placeholder="请输入会员编号" v-model="ad.userId" />
            </el-form-item>
            <el-form-item label="姓名" prop="userName">
                <el-input placeholder="请输入会员姓名" v-model="ad.userName" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select placeholder="请选择会员性别" style="width:160px" v-model="ad.sex">
                    <el-option label="不限" value="" />
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                </el-select>
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
                <el-input placeholder="请输入会员手机号" v-model="ad.phone" />
            </el-form-item>
            <el-form-item label="备注" prop="description">
                <el-input placeholder="请输入会员的备注" v-model="ad.description" />
            </el-form-item>
            <el-form-item label="出生日期：" prop="birthdayR">
                <el-date-picker type="daterange" start-placeholder="起始日期" end-placeholder="截止日期" v-model="ad.birthdayR"
                    value-format="YYYY-MM-DD" />
            </el-form-item>

            <el-button type="primary" :icon="Search" @click="search" style="margin-bottom: 20px;">查询</el-button>
            <el-button type="primary" :icon="Refresh" @click="restform" style="margin-bottom: 20px;">重置</el-button>
        </el-form>
    </div>
    <div class="xinzeng" style="position: relative;margin-left: 940px ;margin-top: -52px; ">
        <el-button type="primary" :icon="CirclePlus" @click="addnew" > 新增</el-button>
    </div>


    <!-- 表格 -->
    <div class="table" style="margin-top: 5px;">
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="headerCellStyle" align="center"
            ref="table">
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column prop="userId" label="会员编号" width="180" align="center" />
            <el-table-column prop="userName" label="会员姓名" width="180" align="center" />
            <el-table-column prop="sex" label="性别" width="80" align="center" />
            <el-table-column prop="birthday" label="出生日期" width="180" align="center" />
            <el-table-column prop="phone" label="手机号" width="180" align="center" />
            <el-table-column prop="description" label="备注" align="center" />
            <el-table-column fixed="right" label="操作" width="240" align="center" >
                <!-- 点击时获取这行的数据 -->
                <template v-slot="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button type="danger" size="small" @click="delbyid(scope.row)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                    <el-button v-if="scope.row.status=='0'" type="danger" size="small" @click="status(scope.row)">
                        <el-icon><Key /></el-icon>
                        禁用
                    </el-button>
                    <el-button v-else="scope.row.tatus=='1'" type="success" size="small" @click="status(scope.row)">
                        <el-icon><Key /></el-icon>
                       启用
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination v-model:current-page="pi.pageNo" v-model:page-size="pi.pageSize"
                :page-sizes="[10, 30, 50, 100]" :total="pi.total" layout="total, sizes, prev, pager, next, jumper"
                background @change="paginate" />
        </div>

    </div>
  
    <!-- 新增删除表单 -->
    <el-dialog v-model="show" :title="title" width="800" draggable :close-on-click-modal="false" @close="close"
        style="margin-bottom: 5px;text-align: center;">
        <el-form :model="aeform" ref="sfRef">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="会员编号：" label-width="100" prop="userId">
                        <el-input v-model="aeform.userId" placeholder="请输入会员编号" />
                    </el-form-item>
                    <el-form-item label="会员姓名：" label-width="100" prop="userName">
                        <el-input v-model="aeform.userName" placeholder="请输入会员姓名" />
                    </el-form-item>
                    <el-form-item label="会员性别：" label-width="100" prop="sex">
                        <el-select v-model="aeform.sex" placeholder="请选择会员性别">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="会员密码：" label-width="100" prop="password">
                        <el-input v-model="aeform.password" placeholder="请输入会员密码" />
                    </el-form-item>
                    <el-form-item label="出生日期：" label-width="100" prop="birthday">
                        <el-date-picker v-model="aeform.birthday" type="date" placeholder="请输入出生日期"
                            style="width:100%;" />
                    </el-form-item>
                    <el-form-item label="手机号：" label-width="100" prop="phone">
                        <el-input v-model="aeform.phone" placeholder="请输入手机号" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注：" label-width="100" prop="description">
                        <el-input v-model="aeform.description" style="width: 100%;" :rows="7" type="textarea"
                            placeholder="请输入备注信息" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 对话框的按钮。插槽 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue"
import { findall, deletebyid, adduser, updateuser ,updateuserstatus} from "@/api/userApi"
import { Delete, Edit, Refresh, Search, CirclePlus,Key } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
onMounted(() => {
    search();

});
async function status(param) {
   
    await updateuserstatus(param.id,param.status);
    search();


}
//查询
let ad = ref({
    userId: "",
    userName: "",
    phone: "",
    sex: "",
    birthdayR: "",
    description: "",
});
let tableData = ref();
async function search() {
    let params = ad.value;
    let resp = await findall(pi.value.pageNo, pi.value.pageSize, params);
   // console.log(resp);
    tableData.value = resp.data;
    pi.value = resp.pi;
}
//新增 修改
let title = ref("新增住客");
let aeform = ref({
    userId: "",
    userName: "",
    phone: "",
    sex: "",
    birthday: "",
    password: "",
    description: ""
});
let show = ref(false);
function addnew() {
    show.value = true;
    title.value = "新增住客";

}
//点击提交判断是提交还是修改
function submitForm() {
    //let xxuser = toRaw(aeform.value);
   let xxuser= aeform.value;
    if (xxuser.id) {
        //有id调用修改
        submitEdit(xxuser);
    } else {
        //无id调用新增
        submitadd(xxuser);

    }
}

async function submitadd(xxuser) {
    let resp = await adduser(xxuser);

    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请确认您要添加的数据或联系管理员',
            type: 'error',
        });
        //show.value=false;
    }
}
//修改
function edit(row) {
    //浅克隆
    row = Object.assign({}, row);
    show.value = true;
    title.value = "修改住客",
        nextTick(() => {
            aeform.value = row;
        });
}
async function submitEdit(user) {
    //向后台提交数据
    let resp = await updateuser(user);

    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请检查数据完整性或是否已进行修改',
            type: 'error',
        });
        //show.value=false;
    }
}
let sfRef;//新增和修改表单的实例引用
//关闭对话框时触发此事件
function close() {
    sfRef.resetFields();//重置表单
}


//重置
let searchfromat;
function restform() {
    searchfromat.resetFields();
    search();
}

//删除
let table;
function delbyid(row) {
    ElMessageBox.confirm(
        "您确定要删除吗？",
        "确认", {
        type: 'warning',
    }
    ).then(async () => {
        let id = row.id;
        let ids = [];
        ids.push(id);
        let resp = await deletebyid(ids);
        if (resp.success) {
            ElMessage({
                message: "删除成功",
                type: "success"
            });
            //成功之后刷新
            search();
        } else {
            ElMessage({
                message: "删除失败,请联系管理员",
                type: "error"
            });
        }
    })
}


//分页
let pi = ref({
    pageNo: 1,
    pageSize: 10,
    total: 0
});
function paginate() {
    search();
}
//表头颜色
function headerCellStyle() {
    return {
        backgroundColor: "#B3CAD8",
        textAlign: "center",
        color: "#fff"
    }
}

</script>
<style scoped>
</style>
